<template>
  <div id="allocatedManage">
    <!--上部搜索条件组件-->
    <topSearch
      ref="topSearch"
      :form-inline="formInline"
      @toSearch="toSearch"
    ></topSearch>
    <!-- 操作按钮 -->
    <div class="table-conBtn" v-if="showBtn">
      <el-button type="warning" icon="el-icon-upload2" @click="importBtn">
        导入
      </el-button>
      <el-button type="warning" @click="exportFile">
        导出
        <i class="el-icon-download el-icon--right"></i>
      </el-button>
      <el-button type="warning" plain @click="batchAward">
        批量发放奖品
      </el-button>
      <freshCom @searchList="getPrizeId"></freshCom>
    </div>
    <!-- 表格部分-->
    <el-table
      :data="tableData"
      stripe
      style="width: 100%"
      @selection-change="handleSelectionChange"
      max-height="490"
      ref="table"
    >
      <el-table-column
        type="selection"
        :selectable="selectAble"
        width="50"
      ></el-table-column>
      <el-table-column type="index" width="50" align="center" label="序号">
        <template slot-scope="scope">
          {{
            scope.$index
              | filterPage(searchParams.pageNum, searchParams.pageSize)
          }}
        </template>
      </el-table-column>
      <el-table-column
        prop="id"
        label="获奖信息ID"
        min-width="180"
      ></el-table-column>
      <el-table-column
        prop="user.dpAccount"
        label="大鹏号"
        min-width="120"
      ></el-table-column>
      <el-table-column
        prop="user.name"
        label="用户昵称"
        min-width="80"
      ></el-table-column>
      <el-table-column
        show-overflow-tooltip
        prop="awardName"
        label="奖项名称"
        min-width="140"
      ></el-table-column>
      <el-table-column
        prop="activityName"
        label="活动名称"
        min-width="80"
      ></el-table-column>
      <el-table-column prop="prizeType" label="奖品类型" min-width="100">
        <template slot-scope="scope">
          <span
            v-if="scope.row.prizeType"
            class="tag-span"
            :class="scope.row.prizeType | filterClass('prizesType')"
            >{{ scope.row.prizeType | filterName('prizesType') }}</span
          >
        </template>
      </el-table-column>
      <el-table-column
        prop="prizeName"
        label="奖品名称"
        min-width="80"
      ></el-table-column>
      <el-table-column prop="state" label="发放状态" min-width="80">
        <template slot-scope="scope">
          <span
            v-if="scope.row.state"
            class="tag-span"
            :class="scope.row.state | filterClass('issuedStatus')"
            >{{ scope.row.state | filterName('issuedStatus') }}</span
          >
        </template>
      </el-table-column>
      <el-table-column prop="address.name" label="收件人" min-width="80">
      </el-table-column>
      <el-table-column prop="address.hidePhone" label="联系方式" min-width="80">
      </el-table-column>
      <el-table-column label="详细地址" prop="detailAddress" min-width="180">
        <!-- <template slot-scope="scpope">
              {{ scpope.row.prizesType }}
              <span v-if="scpope.row.prizesType === 'ENTITY'">{{
                getAddress(scpope.row.address)
              }}</span>
              <span v-else>-</span>
            </template> -->
      </el-table-column>
      <el-table-column
        prop="courierCompany"
        label="物流信息"
        min-width="80"
      ></el-table-column>
      <el-table-column
        prop="trackingNumber"
        label="物流单号"
        min-width="80"
      ></el-table-column>
      <el-table-column
        prop="operateName"
        label="运营人员"
        min-width="80"
      ></el-table-column>
      <el-table-column
        prop="createdTime"
        label="创建时间"
        min-width="100"
      ></el-table-column>
      <el-table-column
        prop="changeTime"
        label="最后一次编辑时间"
        min-width="140"
      ></el-table-column>
      <el-table-column
        prop="lastModifyName"
        label="最后编辑人"
        min-width="90"
      ></el-table-column>
      <el-table-column label="操作" width="100" v-if="showBtn">
        <template slot-scope="scope">
          <el-button type="text" @click="editBtn(scope.row)">
            编辑
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    <!--分页-全局组件-->
    <pageCom
      :searchParams="searchParams"
      :total="total"
      @searchList="getPrizeId"
    ></pageCom>
    <!--编辑角色dialog -->
    <dialogEdit
      v-if="dialogData.isShow"
      :dialog-data="dialogData"
      @refresh="refresh"
    ></dialogEdit>
    <!-- 导入弹窗 -->
    <importDialog
      v-if="importDialogData.isShow"
      :dialog-data="importDialogData"
      @refresh="refresh"
      @showError="showError"
    ></importDialog>
    <!-- 导入失败弹窗 -->
    <errorDialog
      v-if="errorDialogData.isShow"
      :dialog-data="errorDialogData"
      from="allocatedManage"
    ></errorDialog>
    <div v-if="showBtn" class="btn-box">
      <el-button plain @click="cancelLabel">
        取 消
      </el-button>
      <el-button type="primary" @click="nextLab('prizeSetting')">
        上一步
      </el-button>
    </div>
  </div>
</template>

<script>
import {
  getAllocatedMange,
  batchAwardAll,
  importUrl,
  downUrl
} from '@component/activeManagement/common/js/lableApi' // 导入公用方法
import topSearch from '@component/activeManagement/common/templatePage/allocatedManagement/topSearch' // 上部搜索条件
import dialogEdit from '@component/activeManagement/common/templatePage/allocatedManagement/dialogEdit' //编辑
import importDialog from '@common/importDialog' // 导入弹窗
import errorDialog from '@common/errorDialog' // 导入失败弹窗
import { clearTagMixins } from '@/mixins/clearTag'
export default {
  name: 'allocatedManage',
  msg: '发奖管理',
  mixins: [clearTagMixins],
  components: {
    topSearch,
    dialogEdit,
    importDialog,
    errorDialog
  },
  props: ['type', 'backPage'],
  data() {
    return {
      isSave: false,
      loading: false,
      total: 0,
      tableData: [], // table内容
      formInline: {
        dpAccount: '', // 用户名称
        prizeType: '', // 发奖类型
        awardId: '', // 奖项
        state: '', // 发放状态
        startTime: '', // 开始时间
        endTime: '', // 结束时间
        createTime: []
      },
      searchParams: {
        pageNum: 1, // 当前页数
        pageSize: 10 // 页面显示条数
      },
      // 选择框选中的数据
      multipleSelection: [],
      // 传递给编辑弹框的数据
      dialogData: {
        isShow: false, // 控制弹框显示
        params: '' // 参数
      },
      // 传递给导入弹框的数据
      importDialogData: {
        title: '创建发奖管理',
        isShow: false, // 控制弹框显示
        params: '' // 参数
      },
      // 导入失败弹框的数据
      errorDialogData: {
        isShow: false, // 控制弹框显示
        warningText: '' // 参数
      }
    }
  },
  watch: {
    '$route.path': 'getPrizeId'
  },
  computed: {
    showBtn() {
      //是否显示保存按钮
      return this.type === 'add' || this.type === 'edit'
    }
  },
  mounted() {
    /*this.id = this.$route.params.id*/
  },
  methods: {
    getPrizeId() {
      this.id = this.$route.query.id
      let aggregationId = this.$store.state.prizeId[this.id]
      if (aggregationId) {
        this.searchList(aggregationId)
        this.$refs.topSearch.getAward(this.id)
      } else {
        this.$refs.topSearch.setDefault()
        this.tableData = []
        this.total = 0
      }
    },
    /* 获取列表 */
    searchList(aggregationId) {
      this.loading = true
      let params = { ...this.formInline, ...this.searchParams }
      delete params.createTime
      getAllocatedMange(
        aggregationId,
        this.id,
        params,
        (response) => {
          this.loading = false
          this.tableData = response.rows
          this.total = response.total
        },
        (response) => {
          this.loading = false
          this.$message({
            message: response.message,
            type: 'warning'
          })
        }
      )
    },
    // 编辑
    editBtn(item) {
      if (item.address) {
        this.dialogData.params = {
          state: item.state,
          name: item.address.name,
          phone: item.address.phone,
          province: item.address.province,
          city: item.address.city,
          district: item.address.district,
          particularAddress: item.address.particularAddress,
          courierCompany: item.courierCompany,
          trackingNumber: item.trackingNumber,
          prizeType: item.prizeType,
          id: item.id
        }
      } else {
        this.dialogData.params = {
          state: item.state,
          id: item.id
        }
      }

      this.dialogData.isShow = true // 显示编辑弹框
    },
    resetIsSave() {
      this.isSave = false
    },
    cancelLabel() {
      this.clearTag()
    },
    /*退出*/
    signOut() {
      this.$router.go(-1)
      // let query = {
      //   mId: this.$route.query.mId
      // }
      // this.$router.replace({ name: this.backPage, query: query })
    },
    nextLab(labName) {
      this.$emit('changeLab', labName)
    },
    // 批量发放奖品
    batchAward() {
      if (this.multipleSelection.length <= 0) {
        this.$message.warning('请至少选择一条数据！')
        return
      }
      this.$confirm(
        `确认要修改选中的${this.multipleSelection.length}条数据吗?`,
        '系统提示',
        {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }
      ).then(() => {
        let ids = []
        this.multipleSelection.forEach((item) => {
          ids.push(item.id)
        })
        let obj = {
          ids,
          state: 'ISSUED'
        }
        batchAwardAll(
          obj,
          (response) => {
            this.$message({
              message: '修改成功',
              type: 'success'
            })
            this.getPrizeId()
          },
          (response) => {
            this.$message({
              message: response.message,
              type: 'warning'
            })
          }
        )
      })
    },
    // 导入
    importBtn() {
      this.importDialogData.url = importUrl() // 导入接口
      this.importDialogData.downUrl = downUrl() // 下载模板接口
      this.importDialogData.isShow = true // 显示导入弹框
    },
    /* 导入失败弹窗 */
    showError(text) {
      this.errorDialogData.isShow = true // 显示导入失败弹框
      this.errorDialogData.warningText = text // 显示导入失败弹框
    },
    /* 导出 */
    exportFile(type) {
      this.$confirm('确定要导出发奖信息吗？', '系统提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(() => {
          if (this.tableData.length <= 0) {
            this.$message.error(`暂无数据，不能导出`)
            return
          }
          let aggregationId = this.$store.state.prizeId[this.id]
          let url = `/prizes/${aggregationId}/export?activityId=${this.id}`
          let params = Object.assign({}, this.formInline)
          params.pageSize = 10000000
          delete params.createTime
          this.downFile('get', url, params, '发放管理')
        })
        .catch(() => {})
    },
    // table选择
    handleSelectionChange(val) {
      this.multipleSelection = val
    },
    /* 编辑后，刷新列表 */
    refresh() {
      this.getPrizeId()
    },
    /* 搜索 */
    toSearch() {
      this.searchParams.pageNum = 1
      this.getPrizeId()
    },
    // 是否可被选择
    selectAble(row, index) {
      if (row.prizeType === 'ENTITY') {
        return false
      } else {
        return true
      }
    }
  }
}
</script>

<style lang="less"></style>
